<template>
  <common-list>
    <common-search slot="search" @search="handleQuery" @reset="resetQuery">
      <el-form
        @submit.native.prevent
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        @enter="handleQuery"
        label-width="65px"
      >
        <el-form-item label="规则名称" prop="ruleName">
          <common-input
            v-model="queryParams.ruleName"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="告警码" prop="alarmCode">
          <common-input
            v-model="queryParams.alarmCode"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="源IP" prop="sourceIp">
          <common-input
            v-model="queryParams.sourceIp"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="目标IP" prop="targetIp">
          <common-input
            v-model="queryParams.targetIp"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="告警描述" prop="alarmContent">
          <common-input
            v-model="queryParams.alarmContent"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="处理时间">
          <el-date-picker
            v-model="date"
            type="datetimerange"
            @change="dateChange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </common-search>

    <el-row :gutter="10" class="mb8" slot="tools">
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          :disabled="ids.length < 1"
          @click="handleDelete"
          v-hasPermi="['alarmCenter:missRecord:remove']"
          >批量删除
        </el-button>
      </el-col>
    </el-row>

    <common-table
      v-loading="loading"
      slot="content"
      :data="recordList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        label="规则名称"
        align="left"
        prop="ruleName"
        show-overflow-tooltip
      />
      <el-table-column
        label="告警码"
        align="left"
        prop="alarmCode"
        width="110"
        show-overflow-tooltip
      />
      
      <el-table-column
        label="源IP"
        align="left"
        prop="sourceIp"
        show-overflow-tooltip
      />

      <el-table-column
        label="目标IP"
        align="left"
        prop="targetIp"
        show-overflow-tooltip
      />

      <el-table-column
        label="告警描述"
        align="left"
        prop="alarmContent"
        show-overflow-tooltip
      />

      <el-table-column label="误报处理类型" align="left" width="150">
        <template slot-scope="scope">
          <div>{{ scope.row.falseType }}</div>
        </template>
      </el-table-column>

      <el-table-column
        label="处理人"
        align="left"
        prop="createBy"
        width="120"
        show-overflow-tooltip
      />

      <el-table-column
        label="告警时间"
        align="left"
        prop="alarmTime"
        width="180"
        show-overflow-tooltip
      >
        <template slot-scope="{ row }"
          >{{ parseTime(new Date(row.alarmTime)) }}
        </template>
      </el-table-column>

      <el-table-column
        label="处理时间"
        align="left"
        prop="updateTime"
        width="180"
      />

      <el-table-column label="操作" align="left" width="90px">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleEdit(scope.row)"
            v-hasPermi="['alarmCenter:missRecord:edit']"
            >编辑
          </el-button>
          <el-button
            type="text"
            @click="handleDelete(scope.row)"
            v-hasPermi="['alarmCenter:missRecord:remove']"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </common-table>

    <pagination
      slot="pagination"
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <alarm-handle ref="alarmHandle" @refresh="getList" :isMissRecord="true"/>
  </common-list>
</template>

<script>
import { fetchList, missRecordDelete } from "@/api/alarmCenter/missRecord";
import alarmHandle from "../components/alarmHandle.vue";

import BaseList from "@/mixins/BaseList";
export default {
  mixins: [BaseList],
  components: {
    alarmHandle
  },
  data() {
    return {
      ids: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        ruleName: null,
        alarmCode: null,
        sourceIp: null,
        targetIp: null,
        alarmContent: null,
      },
      total: 0,
      recordList: [],
      loading: false,
      date: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    dateChange() {
      let endTime = null,
        beginTime = null;
      if (this.date && this.date.length > 0) {
        beginTime = this.date[0];
        endTime = this.date[1];
      }
      this.queryParams.beginTime = beginTime || null;
      this.queryParams.endTime = endTime || null;
    },
    getList() {
      this.loading = true;
      fetchList(this.queryParams)
        .then((res) => {
          if (res && res.code === 200) {
            this.recordList = res.rows.reduce((r, c) => {
              r.push({
                ...c,
                falseType:
                  c.falseAlarmType === 0
                    ? "源IP"
                    : c.falseAlarmType === 1
                    ? "规则名称"
                    : "源IP，规则名称",
              });
              return r;
            }, []);
            console.log(this.recordList);
            this.total = res.total;
          } else {
            this.recordList = [];
            this.total = 0;
            this.handleListTips(res);
          }
        })
        .catch((res) => {
          this.recordList = [];
          this.total = 0;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    handleEdit(row){
      this.$refs.alarmHandle.show(row ? { ...row } : {});
    },

    handleDelete(row) {
      const ids = row.id || this.ids.join(",");

      this.$GlobalDeleteConfirm().then(() => {
        missRecordDelete({ ids }).then((res) => {
          if (res && res.code == 200) {
            this.$GlobalSuccessMessage("删除成功");
            if (
              this.queryParams.pageNum > 1 &&
              ids.split(",").length === this.recordList.length
            ) {
              this.queryParams.pageNum -= 1;
            }
            this.getList();
          } else {
            this.$GlobalErrorConfirm("删除失败", res.msg);
          }
        });
      }).catch(()=>{});
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
    },

    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.date = [];
      this.queryParams = this.$options.data().queryParams;
    },
  },
};
</script>

<style lang="scss">
</style>